<script>
import {ElMessage} from "element-plus";

export default {
  name: 'App',
  data(){
    return {
      dialogVisible: false,
      tableData:[
        {
          date:'2012-12-10',
          name: 'jack',
          address:'四川乐山'
        },
        {
          date:'2012-12-11',
          name: 'rose',
          address:'四川乐山'
        },
        {
          date:'2012-12-12',
          name: 'tom',
          address:'四川乐山'
        },
      ],
      currentPage:2,//当前页码
      pageSize: 20,//每页显示条目个数
      size: 'large',//分页大小
      total: 50//总条数
    }
  },
  methods:{
    login(){
      ElMessage({
        type: 'info',
        message: '我要登录了...',
        showClose: true
      })
    }
  }
}
</script>

<template>
    <div>
      <div class="mb-4">
        <el-button @click="dialogVisible=true">单击弹出对话框</el-button>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
      </div>
      <el-dialog
          v-model="dialogVisible"
          title="Tips"
          width="500"
          :before-close="handleClose"
      >
        <span>这是一个对话框</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>

      <div class="table-div">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" :selectable="selectable" width="55" />
          <el-table-column label="日期" width="120">
        <!--  插槽          -->
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="姓名" width="120" />
          <el-table-column property="address" label="地址" />
        </el-table>
    <!--分页组件        -->
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
</template>

<style scoped>
  .table-div{
    width: 80%;
    margin: 0 auto;
  }
</style>
